CSS Float & Clear Demo

CSS Float & Clear Example

This image is floated to the left. Text naturally wraps around it, creating a newspaper-style layout. Float is often used for images, sidebars, or even navigation menus in old layouts.

This image is floated to the right. Notice how the text flows around it from the left side. Floats give flexibility, but if not cleared, they can break the layout of elements below.

I used clear: both to stop overlapping with floated elements above.

This is a normal box placed after clear. Without `clear: both`, it would overlap with the floated images.